<template>
	<div>
		<!-- 		<div class="top">

		</div> -->
		<div class="subject">
			<!-- 空白部分，可以添加其他 -->
			<div class="subjectTop">

			</div>
			<!-- 视频部分 -->
			<div class="subjectMain">
				<div class="main">
					<div class="mainLeft">
						<div class="leftTop">
							<!-- 头像 -->
							<div class="demo-fit">
								<div class="block" v-for="fit in fits" :key="fit">
									<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
								</div>
							</div>
						</div>
						<div class="leftMain">
							<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
								<source src="" type="video/mp4" ref="video">
							</video>
						</div>
						<div class="leftBottom">
							<!-- 礼物 -->
							<div class="demo-fit">
								<div class="block" v-for="fit in fits" :key="fit">
									<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
								</div>
							</div>
						</div>
					</div>
					<div class="mainRight">
						<douyu-chat />
					</div>
				</div>
			</div>
			<!-- 下部，可以添加其他 -->
			<div class="subjectBottom">

			</div>
		</div>
		<!-- 用于弹窗上传视频文件 -->
		<el-button class="uploadFile" type="danger" icon="el-icon-upload" circle @click="uploadDialog()"></el-button>
		<el-dialog title="文件上传" v-model="dialogVisible" width="60%" center>
			<upload @clone="clone()" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>



	</div>
</template>

<script>
	import douyuChat from './DouyuChat.vue';
	import upload from '../../components/upload/Upload.vue';
	import {
		get
	} from '../../plugin/http.js'
	export default {
		name: 'douyuone',
		components: {
			douyuChat,
			upload
		},
		data: () => ({
			src: '', //require("E://MP4/userFIle/111111111one.mp4"),
			fits: ['fill'],
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			dialogVisible: false
		}),
		mounted() {},
		created() {
			this.getMp4Src();
		},
		methods: {
			getMp4Src() {
				const that = this;
				get("/getfilePath").then(res => {
					debugger
					if (res.data.code == '200') {
						let filepath = res.data.data.filePath;
						filepath = filepath.substring(filepath.lastIndexOf("\\") + 1);
						that.src = require("E://MP4/userFIle/" + filepath);
						that.$refs.video.src = that.src;
						this.initVideo();
					} else {

					}
				})
			},
			initVideo() {
				//初始化视频方法
				let myPlayer = this.$video(myVideo, {
					// 是否显示控制条。
					controls: true,
					// 视频封面图地址
					poster: 'xxx',
					//自动播放属性,muted:静音播放,none:关闭自动播放
					autoplay: true, //'muted'
					//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
					preload: "auto",
					//设置视频播放器的显示宽度（以像素为单位）
					width: "100%",
					//设置视频播放器的显示高度（以像素为单位）
					height: "500px",
					// 自适应宽高 
					fluid: true,
					//长宽比
					aspectRatio: '11:6',
				});
			},
			//上传文件弹窗
			uploadDialog() {
				debugger
				this.dialogVisible = true;
			},
			//用于文件上传成功时回调，刷新页面
			clone() {
				this.dialogVisible = false;
				window.location.href = '/';
			}
		}
	}
</script>

<style scoped>
	/* 	.top {
		position: fixed;
		元素的位置相对于浏览器窗口是固定位置
		width: 100%;
		height: 60px;
		background-color: #0C0969;
		top: 0px;
		z-index: 10;
	} */

	.subject {
		width: 100%;
		background-color: #475669;
	}

	/*  */
	.subjectTop {
		width: 100%;
		height: 700px;
		/* 高度应该是窗口高度 */
		background-image: url(../../assets/static/douyuimg/douyuone.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.subjectMain {
		width: 100%;
		height: 700px;
	}

	.main {
		position: relative;
		width: 90%;
		height: 700px;
		margin: auto;
	}

	.mainLeft {
		float: left;
		width: 70%;
		height: 700px;
		background-color: #0C0969;
		boder-top-left-radius: 30px;
		boder-top-right-radius: 30px;
	}

	.leftTop {
		width: 100%;
		height: 100px;
		background-color: aqua;

	}

	.leftMain {
		width: 100%;
		height: 500px;
		background-color: #475669;
	}

	.leftBottom {
		width: 100%;
		height: 100px;
		background-color: #0C0969;
	}

	.mainRight {
		float: right;
		width: 29%;
		height: 700px;
		background-color: #bf6e55;
	}

	/*  */
	.subjectBottom {
		width: 100%;
		height: 600px;
		background-image: url(../../assets/static/douyuimg/douyutwo.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.uploadFile {
		position: fixed;
		bottom: 50%;
		right: 0px;
	}
</style>
